<!-- PSA Setting -->
<!-- Author: Edwin -->
<template>
  <el-dialog :visible.sync="dialogStatus"
             width="500px">
    <template v-if="!isHasPsa">
      <div style="position:absolute;top:0;left:0;width:100%;height:100%;background:#ededed;opacity:0.8;z-index:2050;"></div>
      <div style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:2051;display:flex;flex-direction:column;justify-content:center;align-items:center;">
        <el-button size="mini"
                   @click="toGetStartedPage"
                   type="primary">{{ $t('custom.bots.psa.toGetStartedBtn') }}</el-button>
      </div>
    </template>
    <div slot="title"
         style="fontWeight: bold;fontSize: 1.2em;">{{ $t('custom.bots.psa.title') }}</div>
    <el-form label-width="120px"
             v-loading="loadingForGetInfo">
      <el-form-item :label="$t('custom.bots.psa.labelPSA')"
                    label-width='130px'>
        <el-select v-model="selectedPSA"
                   :disabled="true"
                   :placeholder="$t('custom.bots.psa.noData')"
                   style="width:100%;">
          <el-option v-for="item in comPSAList"
                     :key="item.dictValue"
                     :label="item.dictLabel"
                     :value="item.dictValue">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('custom.bots.psa.labelStatus')"
                    label-width='130px'>
        <el-input size="small"
                  @keyup.enter.native="savePSAInfo"
                  v-model="PSAInfo.value">
          <el-button slot="append"
                     @click="useDefaultStatus">Default</el-button>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="mini"
                   :loading="loadingForSaveBtn"
                   type="primary"
                   @click="savePSAInfo">{{ $t('custom.bots.psa.save') }}</el-button>
        <el-button size="mini"
                   @click="closeDialog">{{ $t('custom.bots.psa.cancel') }}</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { fetchSoftwareSetting, updateSoftwareSetting } from '@/api/new'

export default {
  data () {
    return {
      dialogStatus: false,
      isHasPsa: true,
      loadingForGetInfo: false,
      loadingForSaveBtn: false,
      selectedPSA: null,
      // ticketStatus: null,
      botsSettingList: null,
      PSAInfo: {
        softwareName: 'selectedPSA',
        key: 'ticketStatus',
        value: null
      },
      PSAInfoId: null
    }
  },
  watch: {
    dialogStatus (val) {
      if (val) {
        // get info
        this.getPSAInfo()
      } else {
        Object.assign(this.$data, this.$options.data())
      }
    }
  },
  computed: {
    comPSAList () {
      return window.SITE_CONFIG['dictList'].find(e => e.dictType === 'get_started_about_psa').dataList
    }
  },
  methods: {
    useDefaultStatus () {
      this.PSAInfo.value = 'In Progress'
      this.$nextTick(() => {
        this.savePSAInfo()
      })
    },
    savePSAInfo () {
      this.loadingForSaveBtn = true
      let temp = { ...this.PSAInfo }
      this.PSAInfoId && (temp.id = this.PSAInfoId)
      const params = [
        temp
      ]
      updateSoftwareSetting(params)
        .then(({ data: res }) => {
          this.loadingForSaveBtn = false
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.$message.success(res.msg)
          this.closeDialog()
        })
        .catch(() => {
          this.loadingForSaveBtn = false
          this.closeDialog()
        })
    },
    getPSAInfo () {
      this.loadingForGetInfo = true
      fetchSoftwareSetting()
        .then(({ data: res }) => {
          this.loadingForGetInfo = false
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          try {
            if (res.data.software.selectedPSA[0]) {
              this.selectedPSA = res.data.software.selectedPSA[0]
            }
          } catch (error) {
            this.isHasPsa = false
          }
          try {
            if (res.data.softwareSetting.selectedPSA) {
              let last = res.data.softwareSetting.selectedPSA.find(e => e.key === 'ticketStatus')
              this.PSAInfo.value = last.value
              this.PSAInfoId = last.id
            }
          } catch (error) { }
        })
        .catch(() => { this.loadingForGetInfo = false })
    },
    openDialog () {
      this.dialogStatus = true
    },
    closeDialog () {
      this.dialogStatus = false
    },
    toGetStartedPage () {
      this.$store.state.GetStarted.dialogStatus = false
      setTimeout(() => {
        this.closeDialog()
        this.$store.state.GetStarted.dialogStatus = true
      }, 0)
    }
  }
}
</script>

<style scoped>
</style>
